<template>
    <div class="search-page">
      <h2>搜索结果："{{ keyword }}"</h2>
      <el-alert 
        v-if="results.length === 0"
        title="没有找到相关文章"
        type="info"
        show-icon
        class="empty-tip"
      />
  
      <div v-else class="results">
        <el-card 
          v-for="article in results"
          :key="article.id"
          class="result-item"
        >
          <router-link :to="`/article/${article.id}`">
            {{ article.title }}
          </router-link>
          <div class="summary">{{ article.summary }}</div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import axios from 'axios'
  const route = useRoute()
  const keyword = ref('')
  const results = ref([])
    // 复用HomeView的测试数据（实际开发应该统一管理数据）
    const mockArticles = [{
    id: 1,
    title: 'Vue3入门指南',
    summary: 'Vue3基础教程...',
    content: '这里是完整的Vue3教程内容...'
  }]
  // 模拟搜索逻辑
  const searchArticles = async (query) => {
    try {
        console.log(query)
        const response = await axios.get(`https://www.bigpigbig.cn/stage-api/myblog/articles/list?pageNum=1&pageSize=10000&title=${query}`);
        
        return response.data.rows;
    } catch (error) {
        console.error('搜索文章时出错:', error);
        return [];
    
    }
  }
  
  // 监听路由参数变化
  watch(
    () => route.query.q,
    async (newVal) => {
      keyword.value = newVal || ''
      if (newVal) {
        results.value =await searchArticles(newVal)
      }
    },
    { immediate: true }
  )
  

  </script>
  
  <style lang="scss" scoped>
  .search-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  
    .empty-tip {
      margin: 20px 0;
    }
  
    .results {
      margin-top: 30px;
  
      .result-item {
        margin-bottom: 15px;
        transition: 0.3s;
  
        &:hover {
          transform: translateX(10px);
        }
  
        a {
          font-size: 1.1em;
          text-decoration: none;
          color: var(--el-color-primary);
        }
  
        .summary {
          color: #666;
          margin-top: 8px;
          font-size: 0.9em;
        }
      }
    }
  }
  </style>